<template>
  <div class="app-container">
    <h1 align="left" style="color: darkorange;margin-left: 20%;">添加资料</h1>
    <el-form  ref="form" :model="form" label-width="120px" style="width: 60%;margin-left: 20%;"  >
      <el-form-item label="资料名称">
        <el-input v-model="form.goodName" placeholder="请输入资料名称" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" maxlength="40" show-word-limit v-model="form.message"></el-input>
      </el-form-item>
     <el-form-item label="资料价格">
       <el-input v-model="form.price" placeholder="请输入资料价格" />
     </el-form-item>
   <el-form-item label="技术点">
       <el-input type="textarea" maxlength="40" show-word-limit v-model="form.function"></el-input>
     </el-form-item>
     <el-form-item label="技术报价">
      <el-input v-model="form.fee" placeholder="请输入技术点报价" />
     </el-form-item>
     <el-form-item label="资料数量">
       <el-input v-model="form.count" placeholder="请输入资料数量" />
     </el-form-item>
     <el-form-item label="选择类型">
       <el-select v-model="value" placeholder="选择类型" class="filter-item" style="float: left;">
          <el-option style="text-align: center;" v-for="goodType in typeList" :key="goodType.typeId" :label="goodType.goodsType" :value="goodType.typeId"></el-option>
       </el-select>
     </el-form-item>
      <el-form-item label="资料图片">
       <el-upload class="upload-demo" :action="UploadUrl()" :before-upload="beforeAvatarUpload">
         <el-button size="small" type="warning" icon="el-icon-upload2">上传</el-button>
       </el-upload>
     </el-form-item>
     <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button @click="onCancel">取消</el-button>
     </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { createGoods,findAllType} from '@/api/good'
  import store from '@/store'
export default {
  data() {
    return {
      token:store.getters.token,
      value:null,
      typeList: null,
       url: 'https://jsonplaceholder.typicode.com/posts/',
      form: {
        count:null,
        goodName: null,
        price:null,
        function:null,
        message:null,
        fee:null,
        typeId:null,
        goodPhoto: null
      }
    }
  },
  created() {
   this.getTypeList()
  },
  methods: {
    getTypeList(){
    	findAllType().then(res=>{
    	  this.typeList=res.data
    	})
    },
    onSubmit() {
      
      console.log(this.form.goodPhoto)
      //文件上传时 请求方式必须是post  enctype必须为multipart/form-data
      var formData = new FormData();
      formData.append('goodPhoto',this.form.goodPhoto);
      formData.append(' price', this.form.price);
      formData.append('count', this.form.count);
      formData.append('message',this.form.message);
      formData.append('typeId', this.value);
      formData.append('goodName',this.form.goodName);
      formData.append('fee',this.form.fee);
      formData.append('function',this.form.function);

      let _this = this;
      this.axios({
        method: 'post',
        url: _this.apiUrl1 + '/good/addGoods',
        data: formData,
        headers: {
          'Authorization':this.token,
          'content-type': 'multipart/form-data'
        }
      }).then(res => {
        if (res.data.status) {
          _this.findAll(),
          _this.$message({
            message: res.data.msg,
            type: 'success'
          });
          // _this.$router.push('/home');
        } else {
          _this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      });
      // createGoods(goodsParam).then(res=>{
      //  this.$message({
      //    message: res.data.msg,
      //    type: 'success'
      //  })
        // })

    },
    UploadUrl() {
      return this.url;
    },
    beforeAvatarUpload(file) {
      this.form.goodPhoto = file;
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>
